<template>
	<div class="zh-table download-statistics">
		<div class="zh-table-open clear">
			<div class="zh-open-left fl">
				<div class="open-width" style="width: 100px">
					<el-select v-model="role_id" filterable placeholder="请选择">
					    <el-option
					      v-for="item in roleData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					</el-select>
				</div>
				<div class="open-width" style="width: 270px">
					<el-input v-model="keyword" placeholder="请输入用户名、资源类型、资源名称搜索" @keyup.enter.native="searchFunc"></el-input>
				</div>
				<el-button type="primary" @click="searchFunc">搜索</el-button>
				<el-button type="primary" @click="reset">重置</el-button>
			</div>
			<div class="zh-open-right fr">
				<el-button type="primary" @click="exportList">导出Excel表</el-button>
			</div>
		</div>
		<div class="zh-table-contents">
			<el-table
			    :data="listData"
			    border
			    max-height="600"
			    style="width: 100%">
			    <el-table-column
			      type="index"
                  :index="typeIndex"
			      label="序号"
			      align="center"
			      show-overflow-tooltip
			      width="50"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="downloadname"
			      label="下载人"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="rolename"
			      label="用户角色"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop=""
			      label="资源名称"
			      align="center"
			      show-overflow-tooltip
			      >
			      	<template slot-scope="scope">
			      		<span  @click="viewResource(scope.row)" class="viewResource"> {{scope.row.name}}</span>
			     	</template>
			    </el-table-column>
			    <el-table-column
			      prop="string"
			      label="资源分类"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="file_type_txt"
			      label="资源类型"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="username"
			      label="上传人"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="status"
			      label="资源状态"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			    <el-table-column
			      prop="download_time"
			      label="下载时间"
			      align="center"
			      show-overflow-tooltip
			      >
			    </el-table-column>
			</el-table>
			<div class="table-pagination" v-show="total_number > 10">
				<el-pagination
				    @size-change="handleSizeChange"
				    @current-change="handleCurrentChange"
				    :current-page="listParam.page_index"
				    :page-sizes="[10, 20, 30, 40, 50, 100]"
				    :page-size="listParam.page_size"
				    layout="total, sizes, prev, pager, next, jumper"
				    :total="total_number">
				</el-pagination>
				<div class="pagination-button">
					<el-button 
						@click="getList"
						type="primary" icon="el-icon-refresh" 
						circle title="刷新数据" size="mini" >
					</el-button>
				</div>
			</div>
		</div>
		<transition name="el-fade-in-linear">
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox"
					v-loading="viewLoading.status"
    				:element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<nativeVideo  v-if="showVideoPlayer" :playParam.sync="playParam" >
						</nativeVideo>

					</div>
				</div>
			</div>
		</transition>
		
        <transition name="el-fade-in-linear" lock-scroll="false" >
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="viewPDFClose"></i>
					</div>
					<div class="masking-document">
                        <div class="pdf-View">
                            <iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
                        </div>
					</div>
				</div>
			</div>
		</transition>
		
        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>

		<el-dialog
			title="音频预览"
			:visible.sync="voiceVisible"
			width="auto"
			style="min-width:550px;"
			top="0"
			custom-class="imgVisible"
			:close-on-click-modal="false"
			:before-close="closeAudio">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl"  controlsList="nodownload" autoplay>
				Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
		
	</div>
</template>
<script>
	import nativeVideo from '../../public/nativeVideo'

  	export default {
	    data() {
		    return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
		      	roleData:[{id:0,name:'全部'}],
		    	listData:[],
		    	listParam:{
		    		keyword:'',
		    		role_id:0,
		    		page_index:1,
		    		page_size:10,
				},
				keyword:'',
		    	role_id:0,
		   		total_number:0,
		   		
		   		isActive: true,
			    isPDFActive: true,
			    viwPdfParam:{
			    	src:'',
		            loadedRatio: 0,
		            page: 1,
		            numPages: 0,
		            rotate: 0,
				},
				imgVisible: false,
				imgViewUrl:'',
				voiceVisible:false,
				voiceViewUrl:'',
				viewLoading:{
					status:false,
					txt:'加载数据...'
				},
				showVideoPlayer:false,
		        playParam:{play_url:'',},
		    }
		},
		created(){
	    	this.getRoleData();
	    	this.getList();
	    },
	    computed: {
            imageIndex() {
                return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
            }
        },
		methods: {
            /**
             * 关闭音频播放
             */
            closeAudio() {
                this.voiceVisible = false;
                document.getElementById("voicepoauy").pause();
            },
			searchFunc(){
				this.listParam.role_id = this.role_id;
				this.listParam.keyword = this.keyword;
				this.listParam.page_index = 1;
				this.getList();
			},
			reset() {
				this.role_id = 0;
				this.keyword = '';
				this.listParam = {
					keyword:'',
		    		role_id:0,
		    		page_index:1,
		    		page_size:10,
				}
				this.getList();
			},
			pdfPageChange(val){
				this.viwPdfParam.page  = val;
			},
			error: function(err) {
				//this.$message.error('读取文件失败');
	        },

			//资源预览转发
			viewResource( obj ){
				this.viewLoading.status = true;
				
				//视频预览
				if( parseInt(obj.file_type) === 6 ){
					this.isActive = false
				}
				//图片预览
				else if( parseInt(obj.file_type) === 3 ) {
					this.imgVisible  = true;
				}
				//文档预览
				else if( parseInt(obj.file_type) === 1 ){
					this.isPDFActive = false
				}
				//音频预览
				else if( parseInt( obj.file_type ) === 5 ){
					this.voiceVisible = true;
				}else{
					this.$message.warning("不支持预览的资源类型")
					return false;
				}
				let success = ( data => {
					var result  = data.data;
					//视频预览
					if( parseInt(result.file_type) === 6 ){
						this.videoView(result.path);
					}
					//图片预览
					else if( parseInt(result.file_type) === 3 ) {
						this.imgView(result.path);
					}
					//文档预览
					else if( parseInt(result.file_type) === 1 ){
						this.pdfView( result.path);
					}
					//音频预览
					else if( parseInt( result.file_type ) === 5 ){
						this.voiceView(result.path)
						//this.$message.warning("不支持预览的资源类型")
					}else{
						this.$message.warning("不支持预览的资源类型")
					}
				})
				let fail = (data => {
					this.viewLoading.status = false;
					this.$message.error(data.msg)
				})
				this.$ajax.get('api/resource/view_info',{params: {id:obj.id,is_video:obj.is_video},func:{success:success,fail:fail}})

			},
			voiceView(url){
	        	this.voiceViewUrl = url;
	        	document.getElementById("voicepoauy").load();	
	        },
			/**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            imgView(url) {
                this.imgViewUrl = url;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [url];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			//pdf预览
			pdfView(url){
				this.viwPdfParam.src =  (url)
				this.viwPdfParam.src =  pdf.createLoadingTask(url)
			},
			viewPDFClose(){
				this.isPDFActive = true
			},
			//关闭视频预览
			viewClose(){
				this.showVideoPlayer = false;
				this.isActive = true
		
			},
			//视频预览
			videoView(url){
				this.showVideoPlayer = true;
				this.playParam.play_url = url;
			},
			getList(){
				if(this.$store.state.checkLevel){
						this.listParam.app_code = sessionStorage.getItem('CheckSchoolAppCode')
				}
				let success = (data=>{
					this.listData = data.data.data;
					this.total_number = data.data.data_sum;
				})
				//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
				this.$ajax.get('api/user/manage_download_list',{params: this.listParam,func:{success:success}})
			},
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_size + 1;
            },
			getRoleData(){
		    	// 重写成功回调
				let success = ( data => {
					this.roleData = data.data;
					this.roleData.unshift({id:0,name:'全部身份'})
				});
  				this.$ajax.get('api/role/get_all',{params:{},func:{success:success}})
		    	
		    },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		    exportList(){            
                if( this.listData.length === 0 ){
					this.$message.warning("暂无数据！")
					return false;
                }

                this.export_excel('api/user/manage_download_list_excel', this.listParam, '下载统计');
	    	},
		},
		components: {
		    // pdf,
		    nativeVideo
		}
  	}
</script>
<style lang="scss">
	.masking{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: .5s;
		background: rgba(0,0,0,.3);
		z-index: 4;
		.maskingBox{
			position: absolute;
			top: 20%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}
		.masking_h{
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;
			>span,
			>i{
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}
			>i{
				cursor: pointer;
			}
		}
        
        .pdfView{
            // padding: 30px;
            height: 70vh;
            max-height: 550px;
            overflow: hidden;
            overflow-y: auto;
        }
        
		.masking_c{
			padding: 30px;
		}

	}

	.activeLive{
		opacity: 0;
		visibility: hidden;
	}
</style>